import { toThousandFilter } from "@/utils/filter"
import { ElTag } from "element-plus"
import { h } from "vue"

const statusMap = {
  success: 'success',
  pending: 'danger'
}
type statusType = 'success' | 'pending'
type resultType = 'success' | 'danger'

interface RowType {
  orderNo: String
  price: string | number
  status: statusType
  timestamp: Date
  username: String
}

const filters = {
  orderNoFilter: (str: String) => {
    return str.substring(0, 30)
  },
  statusFilter: (status: statusType) => {
    return statusMap[status]
  }
}


const tableColumns = [
  {
    prop: 'orderNo',
    label: 'OrderNo',
    minWidth: 200,
    sortable: true,
    render(param: { row: RowType; index: number }) {
      const { row, index } = param
      return h(
        'div',
        null,
        filters.orderNoFilter(row.orderNo)
      )
    }
  },
  {
    prop: 'price',
    label: 'Price',
    align: 'center',
    sortable: true,
    render(param: { row: RowType; index: number }) {
      const { row, index } = param
      return h(
        'div',
        null,
        `¥${toThousandFilter(row.price)}`
      )
    }
  },
  {
    prop: 'status',
    label: 'Status',
    align: 'center',
    sortable: true,
    render(param: { row: RowType; index: number }) {
      const { row, index } = param
      return h(
        ElTag, {
          type: filters.statusFilter(row.status) as resultType
        },
        () => row.status
      )
    }
  },
]

export default tableColumns